<!-- Created by mhy on 2018/6/27.

 -->
<style scoped lang="scss">
    .frame-index{
        position: relative;
        width: 100%; overflow: hidden;
        background:#F2F2F2;
    }
    .u-wrap{
        position: relative;
        display: flex;
        margin: 70px auto 0 auto;
        min-width: 1200px;
    }

    .u-detail{
        position: relative;
        flex: 1;
        background: #fff;
    }

    .u-vip-box{
        position: relative;
        width: 30%;
    }

    .u-header{
        height: 94px;
        position: relative;
        border-bottom: 2px solid rgba(151, 151, 151, 1);
    }

    .u-name{
        position: absolute;
        left: 50px; top: 36px;
        height:40px;
        font-size:28px;
        color:rgba(48,54,65,1);
        line-height:40px;
    }

    .u-btn{
        position: absolute;
        width:80px;
        height:37px;
        top: 33px; right: 50px;
        background:rgba(255,82,62,1);
        border-radius:5px;
        color: #fff;
        font-size:12px;
        text-align: center;
        line-height: 37px;
    }

    .u-body{
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding: 0 50px;
        min-width: 750px;
        overflow: hidden;
    }

    .u-block{
        position: relative;
        height: 106px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-regist{
        position: absolute;
        left: 0; top: 50px;
        height: 37px; line-height: 37px;
        color: #303641;
        font-size: 26px;
    }

    .u-red{
        color: #FF523E;
    }

    button{
        cursor: pointer;
    }

    .u-item-block{
        position: relative;
        height: 129px;
        font-size: 16px;
        border-bottom: 1px solid #E5E5E5;
    }

    .u-item-label{
        position: absolute;
        left: 0; top: 30px;
    }

    .u-item-text{
        position: absolute;
        right: 0; top: 30px;
    }

    .u-vip-update{
        position: absolute;
        left: 0; top: 82px;
        color: #F5A623;
    }

    .u-pass-btn{
        position: absolute;
        line-height: 30px; text-align: center;
        width:60px;
        height:30px;
        background:rgba(2,187,0,1);
        border-radius:5px;
        color: #fff;
        bottom: 23px; right: 70px;
    }

    .u-refuse-btn{
       @extend .u-pass-btn;
       background: #F5A623; right: 0;
    }

    .u-btn-black{
        @extend .u-btn;
        color: #fff;
        background: #000;
    }

    .c-title{
        position: relative;
        height: 80px;
        background:rgba(242,242,242,1);
    }

    .u-vip-wrap{
        position: relative;
        width: 88.57142857142857%;
        margin: 0 auto;
    }

    .u-vip-title{
        height: 94px;
        line-height: 94px;
        text-align: center;
        border-bottom: 2px solid rgba(151,151,151,1);
        color:rgba(48,54,65,1);
        font-size:20px;
        margin-bottom: 28px;
        cursor: pointer;
    }

    .u-vip-item{
        position: relative;
        height:109px;
        box-shadow:0px 1px 2px 0px rgba(0,0,0,0.04);
        border-radius:3px;
        margin-bottom: 13px;
        background: #fff;
    }

    .u-vip-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
    }

    .u-invite-logo{
        position: absolute;
        width: 37px; height: 37px;
        left: 13px; top: 18px;
        overflow: hidden;
    }

    .u-vip-dec{
        position: absolute;
        left: 62px; top: 18px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 1;
    }

    .u-invite-dec{
        position: absolute;
        left: 62px; top: 18px;
        right: 20px;
        height: 32px;
        color:rgba(85,85,85,1);
        font-size:12px; line-height: 16px;
        text-align: left;
    }

    .u-vip-type{
        position: absolute;
        left: 62px; top: 33px;
        color:rgba(17,17,17,1);
        height:30px; line-height: 30px;
        font-size:22px;
    }

    .u-vip-price{
        position: absolute;
        left: 62px;  bottom: 7px;
        color:#303641;
        font-size:12px; line-height: 1;
    }

    .u-vip-zhe{
        position: absolute;
        bottom: 7px;right: 15px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-vip-date{
        position: absolute;
        right: 14px; bottom: 7px;
        color:rgba(136,136,136,1);
        font-size:12px; line-height: 1;
    }

    .u-invite-date{
        margin: 16px 0 10px 0;
        text-align: center;
        color:rgba(136,136,136,1);
        height: 12px;
        font-size:12px; line-height: 1;
    }

    .u-detail-center{
        width: 71%; margin: 0 auto;
        flex: none;
        min-width: 850px;
    }

    .cursor{
        cursor: pointer;
    }

</style>

<template>
    <div class="frame-index">
        <div class="u-wrap">
            <div class="u-detail" :class="{'u-detail-center': !showVipList}">
                <div class="u-header">
                    <div class="u-name">{{shopData.username}}</div>
                    <button class="u-btn" @click="addBlackList">加入黑名单</button>
                    <button class="u-btn-black" @click="removeBlackList">解除黑名单</button>
                </div>

                <div class="u-body">
                    <UheadItem :imgurl="shopData.usericon"/>
                    <Uitem label="状态" text="正常"/>
                    <Uitem label="备注" :text="shopData.content">
                        <button slot="label" @click="updateCommom">修改</button>
                    </Uitem>
                    <Uitem label="商户ID" :text="shopData.userid"/>
                    <Uitem label="开通VIP日期" :text="shopData.viptime | viptime">
                        <!-- <button slot="label">修改</button> -->
                    </Uitem>

                    <!-- <div class="u-item-block" v-else-if="vipList.length">
                        <div class="u-item-label">VIP期限至</div>
                        <div class="u-item-text">{{shopData.viptime | viptime}}</div>
                        <div class="u-vip-update">修改为 2018-08-09 12:33:56 等待财务授权</div>
                        <button class="u-pass-btn">通过</button>
                        <button class="u-refuse-btn">拒绝</button>
                    </div> -->
                
                    
                </div>
                <Uitem class="cursor" label="购买商户版记录" text="查看详情" green @click.native="showVipView" style="background:rgba(242,242,242,1); padding:0 50px;"/>
                <div class="u-body" style="padding-bottom: 356px;">
                    <Uitem label="所在城市" text="北京"/>
                    <Uitem label="最近登录：" :text="shopData.createtime | registTime"/>
                    <Uitem label="绑定手机：" :text="shopData.userphone"/>

                    <div class="u-block"><div class="u-regist">注册信息</div></div>
                    <Uitem label="注册方式" text="微信"/>
                    <Uitem label="微信昵称" text="Mr.Liang"/>
                    <Uitem label="注册日期" :text="shopData.createtime | registTime"/>
                    <Uitem label="注册设备" :text="shopData.deviceid"/>
                </div>
            </div>

            <div class="u-vip-box" v-if="showVipList">
                <div class="u-vip-wrap">
                    <div class="u-vip-title">购买VIP记录</div>
                    <template>
                        <div v-for="(item, key) in [{}]" :key="key">
                            <div class="u-invite-date">{{item.createtime | registTime}}</div>
                            <div class="u-vip-item" style="height:122px;">
                                <img src="" class="u-invite-logo">
                                <div class="u-vip-type" style="top: 18px;">月会员</div>
                                <div class="u-invite-dec" style="top: 56px;">经销商渠道分发，帮助你拓展更多业务来源</div>
                                
                                <div class="u-vip-price">¥450/年</div>
                                <div class="u-vip-zhe">9.5折，可重复购买</div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            
        </div>

        <el-dialog
            title="提示"
            top="15%"
            append-to-body
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-input
                placeholder="请输入内容"
                v-model="content"
                clearable>
            </el-input>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    import UheadItem from '../../components/user/u-head-item.vue'
    import Uitem from '../../components/user/u-item.vue'
    export default {
        data () {
            return {
                showVipList: false,
                showInviteList: false,
                centerDialogVisible: false,
                content: ''
            }
        },
        computed: {
            ...mapState({
                shopData: state => state.shop.shopData,
                vipList: state => state.shop.vipList
            }),
        },
        components: {
            UheadItem,
            Uitem
        },
        mounted () {
            this.$store.state.navTitle = '商户管理'
            this.getShopDetail(this.$route.query.id)
            this.getShopRecord(this.$route.query.id)
            .then(d => {
                console.log(this.inviteList)
            })
        },
        methods: {
            ...mapActions([
                'getShopDetail',
                'getShopRecord',
                'updateShopDetail',
                'updateShopState'
            ]),
            showVipView () {
                this.showVipList = !this.showVipList
            },
            updateData () {
                this.centerDialogVisible = false
                var params = {
                  action: 'update',
                  userid: this.$route.query.id,
                  comment: this.content
                }
                this.updateShopDetail(params)
                  .then(data => {
                    this.getShopDetail(this.$route.query.id)
                    this.centerDialogVisible = false
                  })
            },
            updateCommom () {
                this.centerDialogVisible = true
                this.content = ''
            },
            addBlackList () {
                this.$xalert.open({
                    title: '确定将' + this.shopData.username  + '加入黑名单吗？',
                    btnColor: 'rgba(255,82,62,1)',
                    btnText: '加入黑名单',
                    success: () => {
//                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                      var params = {
                        subid: this.$route.query.id,
                        userid: localStorage.getItem('userid'),
                        state: 'black'
                      }
                      this.updateShopState(params)
                        .then(data => {
                          this.getShopDetail(this.$route.query.id)
                        })
                    }
                })
            },
            removeBlackList () {
                this.$xalert.open({
                    title: '确定将' + this.shopData.username  + '解除黑名单吗？',
                    btnColor: '#000',
                    btnText: '解除黑名单',
                    success: () => {
//                        alert(document.body.offsetHeight)
                        this.$xalert.close()
                      var params = {
                        subid: this.$route.query.id,
                        userid: localStorage.getItem('userid'),
                        state: 'enable'
                      }
                      this.updateShopState(params)
                        .then(data => {
                          this.getShopDetail(this.$route.query.id)
                        })
                    }
                })
            }
        },
        filters: {
            registTime (v) {
                if (v) {
                    return v.substring(0, 4) + '-' + v.substring(4, 6) + '-' + v.substring(6, 8) + ' ' + v.substring(8, 10) + ':' + v.substring(10, 12) + ':' + v.substring(12, 14)
                }
            },
            viptime (v) {
                if (v) {
                    return new Date(Math.floor(v)).format('YYMMDD hh:mm:ss')
                }
            }
        }
    }
</script>
